<template>
   <li @mouseenter="enter(true)" @mouseleave="leave(false)"
   :style="{backgroundColor:bg}"
   >
        <label for="">
            <input type="checkbox" v-model="isCompleted" >
            <span>{{title}}</span>
        </label>
        <button class="btn btn-danger" :style="{display:bg=='white'?'none':'block'}"
        @click="sc"
        >删除</button>
    </li>
</template>

<script lang="ts">
import { Todo } from "@/types/todo";
import { computed, defineComponent, ref } from "@vue/runtime-core";
import Bus from "./bus";

export default defineComponent({
  name:"Item",
  props:{
    todo:Object as ()=>Todo
  },
  setup(props, ctx) {
    let  bg=ref('white')
      let title:string|undefined=props.todo?.title
      let enter=(f:boolean)=>{
            bg.value='pink'
      }
      let leave=(f:boolean)=>{
        bg.value='white'
      }
      let sc=()=>{
        Bus.$emit("sc",title);
      }
      let isCompleted=computed({
          get(){
            return props.todo?.isCompleted
          },
          set(value){
            Bus.$emit("xz",title);
          }
      })
      let dis=ref(false)
      return {
        title,
        isCompleted,
        dis,
        bg,
        enter,
        leave,
        sc
      }
  },
})
</script>

<style>
li{
    list-style: none;
    height: 36px;
    padding: 0 5px;
    line-height: 36px;
    border-bottom: 1px solid #ddd;
}
li label{
    float: left;
    cursor: pointer;
}
li label li input{
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}
li button{
    float: right;
    display: none;
    margin-top: 3px;
}
li:before{
    content: initial;
}
li:last-child{
    border-bottom: none;
}
</style>